//忘记密码手机版
<template>
  <div class="loginWarp">
    <wapHeader></wapHeader>
    <div class="login-container">
      <div class="login_title">{{ $t("vr.retrievepass") }}</div>
      <div class="dialogContent_title" v-if="!isShowEnRegister">
        <div
          class="dialog_item"
          @click="
            showTel = true;
            type = 2;
          "
        >
          {{ $t("vr.mobilePhoneVerification") }}
        </div>
        <div class="dialog_item_inner">|</div>
        <div
          class="dialog_item"
          @click="
            showTel = false;
            type = 1;
          "
        >
          {{ $t("vr.mailboxVerification") }}
        </div>
      </div>

      <div class="login_item" v-if="showTel">
        <el-input
          v-model="user.phone"
          class="inp"
          size="large"
          clearable
          :placeholder="$t('vr.phone')"
        ></el-input>
      </div>

      <div class="login_item" v-else>
        <el-input
          v-model="user.email"
          class="inp"
          size="large"
          clearable
          :placeholder="$t('vr.email')"
        ></el-input>
      </div>

      <div class="login_item" style="display:flex">
        <div class="dialogMain_telItem_left">
          <el-input
            size="large"
            clearable
            class="inp"
            :placeholder="$t('vr.code')"
            v-model="user.checkCode"
          ></el-input>
        </div>
        <div class="dialogMain_telItem_right" @click="getCode">
          {{ getCodeInfo }}
        </div>
      </div>

      <div class="login_item">
        <el-input
          type="password"
          autocomplete="new-password"
          v-model="user.newPassword"
          :placeholder="$t('vr.newpassword')"
          class="inp"
          size="large"
          clearable
          show-password
        ></el-input>
      </div>

      <div class="dialogMain_telItem">
        <el-button class="dialogBtn" size="large" @click="dialogFun">{{
          $t("vr.confirm")
        }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import api from "servicePath/index";
import wapHeader from "../common/back.vue";
import md5 from "md5";
let timeVal = "";
export default {
  data() {
    return {
      showTel: true, // 显示手机验证
      btnLoading: false,
      getCodeInfo: this.$t("vr.getCodeInfo"),
      firstGetCode: false,
      type: "", //类型
      user: {
        phone: "",
        email: "",
        account: "", //用户名
        newPassword: "", // 密码
        checkCode: "" //密码
      }
    };
  },
  components: {
    wapHeader
  },
  mounted() {
    console.log(this.lang);
    if (this.lang == "en" || this.lang == "de") {
      this.type = 1;
      return false;
    } else {
      this.type = 2;
    }
    console.log(this.type);
  },
  computed: {
    ...mapState(["lang"]),
    isShowEnRegister() {
      if (this.lang == "en" || this.lang == "de") {
        // 英文和德文显示邮箱
        this.showTel = false;
        this.type = 1;
        console.log(this.type);
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    ...mapMutations(["isShowLogin"]),
    closeForget() {
      // 关闭忘记密码框
      this.$emit("forgetFun");
    },
    //发送验证码
    async getCode() {
      // 获取验证码,中
      // 判断手机端和邮箱端

      let params = {};
      if (!this.showTel) {
        // 邮箱端发送
        if (
          this.user.email == "" ||
          !/^([\w-])+(\.[\w-]+)*@(([\w-]+\.)+)(\w){2,4}$/.test(this.user.email)
        ) {
          this.$message({
            message: this.$t("vr.pleaseEmail"),
            type: "warning"
          });
          return;
        }
        params = {
          account: this.user.email,
          type: 1
        };
      } else {
        if (
          this.user.phone == "" ||
          !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.user.phone)
        ) {
          this.$message({
            message: this.$t("pleasePhone"),
            type: "warning"
          });
          return;
        }
        params = {
          account: this.user.phone,
          type: 2
        };
      }
      // 定时，且只能传入1次
      if (!this.firstGetCode) {
        this.firstGetCode = true;
        try {
          const res = await api.sendCode(params);
          console.log(res);
          if (res.code == 0) {
            this.$message({
              message: "验证码已发送",
              type: "success"
            });
          }
        } catch (err) {}
        let timeNum = 60;
        let that = this;
        timeVal = setInterval(() => {
          timeNum--;
          that.getCodeInfo = `${timeNum}s`;
          if (timeNum < 0) {
            clearInterval(timeVal);
            that.getCodeInfo = "重新获取";
            this.firstGetCode = false;
          }
        }, 1000);
      } else {
        return false;
      }
    },
    //重置密码
    async dialogFun() {
      if (!this.showTel) {
        // 邮箱端发送
        if (
          this.user.email == "" ||
          !/^([\w-])+(\.[\w-]+)*@(([\w-]+\.)+)(\w){2,4}$/.test(this.user.email)
        ) {
          this.$message({
            message: this.$t("vr.pleaseEmail"),
            type: "warning"
          });
          return;
        }
        this.user.account = this.user.email;
      } else {
        if (
          this.user.phone == "" ||
          !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.user.phone)
        ) {
          this.$message({
            message: "请输入手机号",
            type: "warning"
          });
          return;
        }
        this.user.account = this.user.phone;
      }
      if (this.user.checkCode == "") {
        this.$message({
          message: "请输入验证码",
          type: "warning"
        });
        return;
      }
      if (!this.user.newPassword) {
        this.$message({
          message: "请设置密码",
          type: "warning"
        });
        return;
      }
      let regExp = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$~`%^&*()_+=-?/<>,.|])(.{8,20})$/;
      if (!regExp.test(this.user.newPassword)) {
        this.$message({
          message: "密码8位以上并且由数字，字母和符号三种组成",
          type: "warning"
        });
        return;
      }
      const params = {
        account: this.user.account,
        type: this.type,
        checkCode: this.user.checkCode,
        newPassword: md5(this.user.newPassword)
      };
      const res = await api.resetCode(params);
      this.$message({
        message: this.$t("vr.success"),
        type: "warning"
      });
      let r = "/foundation/wap/login";
      if (this.$route.path.indexOf("/fakuma") >= 0) {
        r = "/fakuma/wap/login";
      }
      this.$router.push(r);
    }
  }
};
</script>
<style lang="scss" scoped>
.login-container {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 20px 27px;

  .login_title {
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 20px;
    position: relative;
    .login_close {
      position: absolute;
      right: -10px;
      top: -10px;
      color: #000;
      cursor: pointer;
    }
  }
  .login_item {
    margin-bottom: 20px;
    .loginBtn {
      margin-top: 20px;
      width: 100%;
      font-size: 16px;
      background: linear-gradient(to right, #ff7f41, #e6007e);
    }
  }
  .dialogBtn {
    background: linear-gradient(to right, #ff7f41, #e6007e);
    color: #fff;
    border: none;
  }
  .login_item_switch {
    span {
      font-size: 12px;
      color: #d8d8d8;
      margin-left: 15px;
    }
  }
  .login_row {
    text-align: center;
    font-size: 12px;
    color: #d8d8d8;
    span {
      color: #ff4949;
      cursor: pointer;
    }
  }
  .forget {
    text-align: center;
    padding-top: 20px;
    a {
      font-size: 12px;
      color: #d8d8d8;
    }
  }
}
.dialogContent_title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .dialog_item {
    cursor: pointer;
  }
  .dialog_item_inner {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.dialogMain_telItem_right {
  height: 40px;
  line-height: 40px;
  width: 100px;
  border-radius: 5px;
  background: linear-gradient(to right, #ff7f41, #e6007e);
  color: #fff;
  text-align: center;
  margin-left: 10px;
}
.dialogMain_telItem button {
  width: 100%;
}
</style>
